/**
 * Email:angcyo@126.com
 * @author angcyo
 * @date 2021/11/28
 */

/**基础样式*/

:root {
    --x: 16px;
    --xs: 8px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/**将鼠标设置成手指, 可以点击的状态*/
.pointer {
    cursor: pointer;
}

.pointer input {
    cursor: pointer !important;
}

/**padding margin 算在width height 内*/
.border-box {
    box-sizing: border-box;
}

.match-parent {
    width: 100%;
    height: 100%;
}

/**横竖填充 x大小*/
.p-x {
    padding: var(--x);
}

/**横向填充 x大小*/
.ph-x {
    padding-left: var(--x);
    padding-right: var(--x);
}

.ph-xs {
    padding-left: var(--xs);
    padding-right: var(--xs);
}

/**纵向填充 x大小*/
.pv-x {
    padding-top: var(--x);
    padding-bottom: var(--x);
}

.pv-xs {
    padding-top: var(--xs);
    padding-bottom: var(--xs);
}

.pl-x {
    padding-left: var(--x);
}

.pt-x {
    padding-top: var(--x);
}

/**顶部填充 xs大小*/
.pt-xs {
    padding-top: var(--xs);
}

.pr-x {
    padding-right: var(--x);
}

.pb-x {
    padding-bottom: var(--x);
}

.pb-xs {
    padding-bottom: var(--xs);
}

.m-x {
    margin: var(--x);
}

.mh-x {
    margin-left: var(--x);
    margin-right: var(--x);
}

.mh-xs {
    margin-left: var(--xs);
    margin-right: var(--xs);
}

.mv-x {
    margin-top: var(--x);
    margin-bottom: var(--x);
}

.mv-xs {
    margin-top: var(--xs);
    margin-bottom: var(--xs);
}

.ml-x {
    margin-left: var(--x);
}

.ml-xs {
    margin-left: var(--xs);
}

.mt-x {
    margin-top: var(--x);
}

.mt-xs {
    margin-top: var(--xs);
}

.mr-x {
    margin-right: var(--x);
}

.mr-xs {
    margin-right: var(--xs);
}

.mb-x {
    margin-bottom: var(--x);
}

.mb-xs {
    margin-bottom: var(--xs);
}

/**-----------------*/

/**需要滚动的内容样式*/
.scroll-content {
    box-sizing: border-box;
    overflow: auto;
    height: 100%;
    width: 100%;
}

/**------布局css------*/

/**帧布局*/
.frame-layout {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

/**子布局居中显示*/
.frame-layout-center {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/**使得子控件居中显示*/
.gravity-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/**所有子标签, 垂直方向居中*/
.gravity-vertical-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-content: center;
}

/**所有子标签, 水平方向居中*/
.gravity-horizontal-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    align-content: center;
}

/**使得子控件平分剩余空间*/
.gravity-space-around {
    display: flex;
    justify-content: space-around;
}

/**使得子控件两端对齐*/
.gravity-space-between {
    display: flex;
    justify-content: space-between;
}

/**------文本css------*/

/**文本换行*/
.text-wrap {
    word-break: break-word;
    word-wrap: break-word;
}

/**单行文本*/
.text-single-line {
    display: -webkit-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
